@use "../../common";

.context_popup {
  @include common.shadow;
  display: flex;
  flex-flow: row;
  background-color: common.$background !important;
  color: common.$white;
  border-color: common.$background2 !important;
  user-select: none;

  &:before {
    background-color: common.$background !important;
  }

  &.bottom:before {
    box-shadow: -1px -1px 0 0 common.$bgdefault !important;
  }

  &.top:before {
    box-shadow: 1px 1px 0 0 common.$bgdefault !important;
  }

  &.visible {
    animation: fade-in common.$short-duration normal forwards ease-in-out;
  }

  hr {
    margin: 0.5em 0 0 0;
    border: none;
    border-bottom: 1px solid common.$bgdefault;
  }

  .popup_content > .content {
    position: absolute;
    display: flex;
    width: 100%;
    height: auto;
  }

  .popup_header {
    display: flex;
    padding: 0.5rem 0;
    height: auto;
  }

  .popup_thumb {
    flex: 0 0 auto;
    width: 5em;
    height: 5em;
    margin-right: 1em;

    img {
      width: 5em;
      height: 5em;
      object-fit: cover;
    }
  }

  .popup_info {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    height: auto;
  }

  .popup_artist {
    flex: 0 0 auto;
    color: rgba(common.$white, 0.6);
  }

  .popup_title {
    flex: 0 0 auto;
    font-weight: bold;
    font-size: 16px;
    color: common.$white;
  }

  .popup_buttons {
    display: flex;
    flex-flow: column;
    flex: 0 0 auto;
    padding-top: 0.5rem;
    height: auto !important;
  }
}
